<template>
  <view class="chatlist">
    <!-- 头部 -->
    <view class="head">
      <view class="flex justify-between padding-left-sm padding-right-sm padding-bottom-sm align-end"
            style="background-image: linear-gradient(120deg, #66a6ff 0%, #1D8BF8 100%);padding-top:88rpx;">
        <view class="flex justify-start">
          <view class="round" style="line-height:0rpx;" @tap="avatarurl()">
            <image src="../../static/avatarurl.png" style="width:77rpx;height:77rpx;"></image>
          </view>
          <view class="flex justify-between flex-direction margin-left-sm">
            <view class="text-lg text-white">{{ username }}</view>
            <view class="text-white text-xs">
              <text
                  class="cuIcon-roundcheckfill text-green margin-right-xs"></text>
              On-Line
              <text
                  class="cuIcon-right text-white"></text>
            </view>
          </view>
        </view>
        <view class="text-white text-xs bg-red round padding-left-sm padding-right-sm"
              style="height:45rpx;line-height:45rpx;" @tap="loginout()">LoginOut
        </view>
      </view>
    </view>
    <!-- placeholder -->
    <view class="holder"></view>

      <view class="position-group">
        <!-- 一级循环 -->
        <view class="pronames_one" v-for="(item,index) in userGroups" :key="index" :class="item.oneliststare?'oneshow':'onehide'" @tap="pronamesOneClick(item)">
          <view class="pronames-one-label"><text>{{item.name}}-{{item.groupId}}</text></view>
          <!-- 二级循环 -->
          <view class="pronames_two" v-for="(user, userIndex) in userGroups[index].users" :key="userIndex" @tap="chooseChat(user.userId,user.nick,item.groupId)">
            <view class="pronames_two-label"><text>{{user.nick}}-{{user.userId}}</text></view>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
import IM from "../../components/IM.js/im.js";
export
default {
  data() {
    return {
      username: "",
      userid: "",
      userGroups: []
    }
  },
  methods: {
    chooseChat(userId,nick,deptNo) {
      if (userId === uni.getStorageSync("userid")) {
        uni.showToast({
          title: "不能选择自己",
          icon: "none"
        })
        return;
      }
      uni.navigateTo({
        url: "../chatcon/chatcon?userId=" + userId+ "&nick=" + nick+ "&deptNo=" + deptNo
      })
    },
    avatarurl() {
      uni.showToast({
        title: "暂不支持上传头像",
        icon: "none"
      })
    },
    // 登出
    loginout() {
      uni.showModal({
        title: "Log out",
        content: "退出当前账号将不能进行对话、查看信息等操作。",
        confirmText: "OK",
        cancelText: "cancel",
        success(res) {
          if (res.confirm) {
            uni.closeSocket({
              success(res) {
                uni.showToast({
                  title: "webscoket已关闭成功！",
                  icon: "none"
                })
              },
              fail(err) {
                console.log("关闭失败", err)
              }
            })
            uni.redirectTo({
              url: "../index/index"
            })
            uni.clearStorageSync();
            return
          }
          uni.showToast({
            title: "cancel",
            icon: "none"
          })
        }
      })
    },

    pronamesOneClick(item) {
      if (item.oneliststare === undefined) {
        item.oneliststare = true
      } else {
        item.oneliststare = !item.oneliststare
      }
    },

    onReady() {
      this.username = uni.getStorageSync("username");
      this.userid = uni.getStorageSync("userid")
    },
    getUserGroup() {
      uni.request({
        url: "http://localhost:8080/im/account/getUserGroup", //仅为示例，并非真实接口地址。
        method: 'GET',
        data: {
          userId: uni.getStorageSync("userid")
        },
        dataType:'json',
        success: (res) => {
          var resdata = res.data
          if (resdata.status == 0) {
            this.userGroups = resdata.data;
          } else {
            uni.showToast({
              title: resdata.msg,
              icon: "none"
            })
          }

        }
      });
    },
    onLoad() {
      this.getUserGroup()
    }
  }
}
</script>

<style lang="scss">
.chatlist {
  .list-con {
    border-bottom: 1px solid #F5F5F5;
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 7;
  }

  .holder {
    height: 180 rpx;
  }
}

.position-group {
  padding-top: 90px;
  width: 100%;
  height: auto;
}


/* 一级 */
.pronames_one {
  width: 100%;
  height: auto;
}

.pronames-one-label {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 3%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eaeaea solid;
}

.pronames-one-label text {
  font-size: 15px;
  color: #2ebbfe;
}

.pronames-one-label label{
  color: #aaa;
  font-size: 20px;
  transition: all 0.5s;

}


/* 二级 */
.pronames_two {
  width: 100%;
  height: 75rpx;
  line-height: 75rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 0px 3%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eaeaea solid;
}

.pronames-two-label {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 3%;
  border-bottom: 1px #eee solid;
}

.pronames-two-label text {
  font-size: 15px;
  color: #2ebbfe;
}

.pronames-two-label label{
  color: #aaa;
  font-size: 20px;
  transition: all 0.5s;

}



/* 三级 */
.pronames_three {
  width: 100%;
  height: auto;
}

.pronames_three-label {
  width: 97%;
  margin-left: 3%;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #f1f1f1 solid;
  align-items: center;
}

.pronames_three-label label {
  width: 10%;
  height: 90rpx;
  line-height: 90rpx;
  display: block;
  color: #D5D5D5;
  font-size: 20px;
}

.pronames_three-label text {
  width: 90%;
  font-size: 15px;
  color: #868686;
}


/* 展开收起效果 start */

.oneshow{}
.oneshow .pronames_two{ display: block; }
.onehide{}
.onehide .pronames_two{ display: none; }

/* 展开收起效果 end */


.twoshow{}
.twoshow .pronames_three{ display: block; }
.twohide{}
.twohide .pronames_three{ display: none; }


</style>
